import React, { Component } from 'react'

import styles from '../style/index.less';

export default class Detail extends Component {

  mapDetailRight = [
    { key: 'pipeEngineering', value: '管网工程' },
    { key: 'renovationWaterworks', value: '水厂改造' },
    { key: 'constructionProgress', value: '土建工程' }
  ]

  mapDetailLeft = {
    projectTotal: { value: '全年工程总数', formatter: '个' },
    investmentTotal: { value: '全年工程总投资', formatter: '万元' }
  }

  // 工程各项指数
  getMapDetailLeft = () => {
    const { projectData } = this.props;
    const { projectTotal, investmentTotal } = this.mapDetailLeft;
    return (
      <>
        <div className={styles.diagonalLine}></div>
        <div className={styles.projectTotal}>
          <p>{projectTotal.value}</p>
          <p style={{ color: '#E7472C' }}>{projectData && projectData.projectTotal}{projectTotal.formatter}</p>
        </div>
        <div className={styles.investmentTotal}>
          <p>{investmentTotal.value}</p>
          <p style={{ color: '#E7472C' }}>{projectData && projectData.investmentTotal}{investmentTotal.formatter}</p>
        </div>
      </>
    )
  }

  // 工程各项指数
  getMapDetailRight = (key, value) => {
    const { projectData } = this.props;
    return (
      <div className={styles.footerDetailRight} key={key}>
        <p className={styles.Right_top}>{value}</p>
        <p className={styles.Right_bottom}>{projectData && projectData[key]}</p>
      </div>
    )
  }

  render() {
    return (
      <div className={styles.mapdetail}>
        <div className={styles.footerDetailLeft}>
          {this.getMapDetailLeft()}
        </div>
        {this.mapDetailRight.map(item => {
          return this.getMapDetailRight(item.key, item.value);
        })}
      </div>
    )
  }
}
